<template>
    <BaseEcharts :chatsOption="chatsOption"></BaseEcharts>
</template>

<script>
    import BaseEcharts from "../../../components/common/Cahrts/coreEcharts"

    export default {
        components: {
            BaseEcharts
        },
        props: {
            chatsOption: {
                type: Object,
                default() {
                    return {
                        tooltip: {
                            trigger: 'axis',
                            formatter: '{b0}{a0}: {c0}<br />{b1}{a1}: {c1}',

                            axisPointer: {
                                type: 'line',
                                label: {
                                    backgroundColor: '#283b56'
                                }
                            },
                            textStyle: {
                                fontSize: 60,
                            },


                            padding: 20,
                            borderWidth: 4,
                            borderColor: "#48AFFF",
                            backgroundColor: "#010541",
                            extraCssText: "border-radius:20px;",
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                                axisLabel: {
                                    fontSize: 40,
                                    color: "#fff",
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                splitLine: {
                                    show: false,
                                },
                                axisLabel: {
                                    fontSize: 40,
                                    color: "#fff",
                                }
                            }
                        ],
                        series: [
                            {
                                name: '直接访问',
                                type: 'line',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        fontSize: 25,
                                    }
                                },
                                areaStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#F6A228' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: '#460D3B' // 100% 处的颜色
                                        }],
                                    }
                                },
                                itemStyle: {
                                    color: "#F6A228",
                                },
                                data: [320, 332, 301, 334, 390, 330, 320]
                            },
                            {
                                name: '搜索引擎',
                                type: 'line',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        fontSize: 25,
                                    }
                                },
                                areaStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#235394' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: '#020A47' // 100% 处的颜色
                                        }],
                                    }
                                },
                                itemStyle: {
                                    color: "#0DDCF9",
                                },
                                data: [820, 932, 901, 934, 1290, 1330, 1320]
                            }
                        ]
                    }
                }
            }
        }

    }
</script>
